<template>
  <view>
    <div class="search">
      <u-search
        class="ipt"
        shape="square"
        bg-color="#fff"
        placeholder="根据关键字搜搜"
        v-model="keyword"
        @custom="custom"
        @change="search"
        :focus="true"
      ></u-search>
    </div>

    <div class="content" v-if="list.length <= 0">
      <text class="title">热门搜索</text>
      <div class="history">
        <span>历史记录</span>
        <u-icon name="trash-fill" @click="clear"></u-icon>
      </div>
      <div class="history-item">
        <text
          class="history-text"
          v-for="item of historyKeyWord"
          :key="item"
          @click="searchByhistory(item)"
        >
          {{ item }}
        </text>
      </div>
    </div>
    <div class="search-result" v-else>
      <div
        class="content-item"
        v-for="item in list"
        :key="item.id"
        @click="toShop(item.id)"
      >
        <view class="left">
          <image class="img" :src="item.logo"></image>
        </view>
        <view class="right">
          <text class="title over">{{ item.brandsName }}</text>
          <text class="address over">地址: {{ item.positionCode }}</text>
        </view>
      </div>
    </div>
  </view>
</template>

<script>
import { jointOrderSearch } from '@/api'
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      keyword: '',
      list: [],
      timeout: ''
    }
  },
  created() {},
  methods: {
    ...mapMutations(['setHistoryKeyWord', 'clearHistoryKeyWord']),
    clear() {
      this.clearHistoryKeyWord()
    },
    searchByhistory(item) {
      this.keyword = item
      this.search()
    },
    custom() {
      this.search()
      this.setHistoryKeyWord(this.keyword)
    },
    search() {
      this.list = []
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        jointOrderSearch(this.keyword).then(res => {
          if (res.data) {
            this.list = res.data
          }
        })
      }, 300)
    },
    toShop(id) {
      uni.navigateTo({
        url: '/pages/package/shop/component/shop-detail?id=' + id
      })
    }
  },
  computed: {
    ...mapState(['historyKeyWord'])
  }
}
</script>

<style lang="less" scoped>
.search {
  background: #f4f4f4;
  padding: 20rpx;
  position: fixed;
  top: 0;
  width: 100vw;
}
.content {
  padding: 40rpx 20rpx;
  margin-top: 80rpx;
  .title {
    font-weight: bold;
    font-size: 32rpx;
  }
  .history {
    margin-top: 20rpx;
    font-size: 32rpx;
    display: flex;
    justify-content: space-between;
    u-icon {
      font-size: 42rpx;
    }
  }
  .history-item {
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
    .history-text {
      background: rgb(226, 223, 223);
      padding: 10rpx 20rpx;
      border-radius: 16rpx;
      margin-right: 20rpx;
    }
  }
}
.search-result {
  margin-top: 100rpx;
  .content-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220rpx;
    border-bottom: 2rpx solid #eee;
    padding: 0 20rpx;
    .left {
      width: 240rpx;
      .img {
        width: 200rpx;
        height: 160rpx;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: 32rpx;
      white-space: nowrap;
      width: 220rpx;

      .over {
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
